<%--
  Created by IntelliJ IDEA.
  User: Root404
  Date: 2023/6/1
  Time: 10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form method="get" action="${pageContext.request.contextPath}/ServletAjax2">
    <input type="text" id="name"  name="name">
    <input type="button" id="yb" value="异步提交">
    <input type="submit" value="提交">
</form>
<ul id="ul5"></ul>
<ul id="ul4"></ul>
<ul id="ul1"></ul>
<ul id="ul2"></ul>
<ul id="ul3"></ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    //书上的
    const getJSON163 = function(url) {
        const promise = new Promise(function(resolve, reject){
            const handler = function() {
                if (this.readyState !== 4) { return; }
                if (this.status === 200) { resolve(this.response);
                } else { reject( new Error(this.statusText)); }
            };
            const client = new XMLHttpRequest();
            client.open("GET", url);
            client.onreadystatechange = handler;
            client.responseType = "json";
            client.setRequestHeader("Accept", "application");
            client.send();
        });
        return promise;
    };
    $("#yb").click(function () {
        var name=$("#name").val();
        getJSON163("${pageContext.request.contextPath}/ServletAjax2?name="+name)
            .then(function (data) {
                            $.each(data,function () {
                                var li="<li>"+this.name+"--213456--"+this.age+"</li>";
                                $("#ul4").append(li);
                            });
            },function () {
                alert("异步失败");
            })
            // }).catch().finally();
    });

$("#ul5").load("TT.html");
    <%--$("#yb").click(function () {--%>
    <%--    $.getJSON(--%>
    <%--        "${pageContext.request.contextPath}/ServletAjax2",--%>
    <%--        $("form").serialize(),--%>
    <%--        function (data) {--%>
    <%--            $.each(data,function () {--%>
    <%--                var li="<li>"+this.name+"----"+this.age+"</li>";--%>
    <%--                $("#ul4").append(li);--%>
    <%--            });--%>
    <%--        }--%>
    <%--    );--%>
    <%--});--%>



    // json 是超级对象数组plus
    // String json =[{"name":"超哥",age:33},......];
    // String json=[];
    // String json={};
    var json1=["蝴蝶","波波","乐乐"];
    for(var i=0;i<json1.length;i++){
        var li="<li>"+json1[i]+"</li>";
        $("#ul1").append(li);
    }//js对象变jq对象，用循环遍历方法
    var $json1=$(json1);
    $.each($json1,function () {
        var li="<li>"+this+"</li>";
        $("#ul2").append(li);
    });
    var json2=[{name:"蝴蝶",age:33},{name:"波波",age:34},{name:"乐乐",age:36}];
    var $json2=$(json2);
    $.each($json2,function () {
        var li="<li>"+this.name+"----"+this.age+"</li>";
        $("#ul3").append(li);
    });
</script>
</body>
</html>
